Index: _CSS/Fluid.Skins.css
===================================================================
--- _CSS/Fluid.Skins.css	(revision 0)
+++ _CSS/Fluid.Skins.css	(revision 0)
@@ -0,0 +1,14 @@
+/** GLOBAL SKINS **/
+/* high contrast */
+
+.-fluid-theme-highContrast h1 {
+    font: bold 3em "Times,serif";
+    color: #fff;
+    background-color: #000;
+}
+
+.-fluid-theme-highContrast h2 {
+    font: bold 2.0em "Times,serif";
+    color: #fff;
+    background-color: #000;
+}
Index: _CSS/Fluid.States.css
===================================================================
--- _CSS/Fluid.States.css	(revision 0)
+++ _CSS/Fluid.States.css	(revision 0)
@@ -0,0 +1,8 @@
+/** GLOBAL STATES **/
+
+.orderable-drop-marker {
+    background-color : red !important;
+    height:2px !important;
+    padding:0px !important;
+    border-width: 0px !important;
+}
Index: LayoutCustomizer/css/Layout.Skins.css
===================================================================
--- LayoutCustomizer/css/Layout.Skins.css	(revision 0)
+++ LayoutCustomizer/css/Layout.Skins.css	(revision 0)
@@ -0,0 +1,75 @@
+/* CSS for the example document */
+h1 {clear:both; padding:40px 0 0; margin:0px;}
+
+
+/* Basic skinning for this component example 1: simple setup */
+.columnSetup1 {font: normal 0.75em Verdana, Arial, sans-serif;}
+    .columnSetup1 .myColumn {
+        margin:0 5px;
+        border:1px solid #666;
+        width:30%;    
+        background-color:#ccc;
+        float: left;
+    }
+    .columnSetup1 .myColumn div, .mySortable {
+        padding: 10px;
+        border:1px solid;
+        margin:5px;
+        background-color:#fff;     
+    }
+    .columnSetup1 .mySortable {
+        cursor : move;
+    }
+
+
+/* Basic skinning for this component example 2: different selectors */
+
+.columnSetup2 {font: normal 0.75em Verdana, Arial, sans-serif;}
+    .columnSetup2 h2 {color:white;}
+    .columnSetup2 div {
+        margin:0 5px;
+        border:1px solid #666;
+        width:30%;    
+        background-color:#000;
+        float: left;
+    }
+    .columnSetup2 div div, .columnSetup2 div p{
+        padding: 10px;
+        border:1px solid #000;
+        margin:5px;
+        width:auto;
+        float:none;
+        background-color:#fff;
+        cursor: not-allowed;
+    }
+    .columnSetup2 div div{
+        cursor : move;
+    }
+
+
+/* Basic skinning for this component example 3: complex setup */
+.columnSetup3 {font: normal 0.75em Verdana, Arial, sans-serif;}
+    .columnSetup3 .myColumn {
+        margin:0 5px;
+        border:1px solid #666;
+        width:30%;    
+        background-color:#ccc;
+        float: left;
+    }
+    .columnSetup3 div div {
+        padding: 10px;
+        border:1px solid;
+        margin:5px;
+        background-color:#fff;
+        cursor : move;
+    }
+
+
+/*
+    local theme options
+    specifically for this component
+*/
+
+
+
+
Index: LayoutCustomizer/Custom_Layout_1.htm
===================================================================
--- LayoutCustomizer/Custom_Layout_1.htm	(revision 0)
+++ LayoutCustomizer/Custom_Layout_1.htm	(revision 0)
@@ -0,0 +1,170 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+		<title>Simple Layout Customizer Sample</title>
+        
+        <link rel="stylesheet" type="text/css" href="../_CSS/Fluid.Skins.css" />
+        <link rel="stylesheet" type="text/css" href="../_CSS/Fluid.States.css" />
+        <link rel="stylesheet" type="text/css" href="css/Layout.Skins.css" />        
+        
+        <script type="text/javascript" src="../../../fluid/components/trunk/src/webapp/fluid-components/js/jquery/jquery-1.2.6.js"></script>
+        <script type="text/javascript" src="../../../fluid/components/trunk/src/webapp/fluid-components/js/jquery/jARIA.js"></script>
+        <script type="text/javascript" src="../../../fluid/components/trunk/src/webapp/fluid-components/js/jquery/jquery.keyboard-a11y.js"></script>
+        <script type="text/javascript" src="../../../fluid/components/trunk/src/webapp/fluid-components/js/jquery/ui.core.js"></script>
+        <script type="text/javascript" src="../../../fluid/components/trunk/src/webapp/fluid-components/js/jquery/ui.draggable.js"></script>
+        <script type="text/javascript" src="../../../fluid/components/trunk/src/webapp/fluid-components/js/jquery/ui.droppable.js"></script>
+        <script type="text/javascript" src="../../../fluid/components/trunk/src/webapp/fluid-components/js/json/json2.js"></script>
+        
+        <script type="text/javascript" src="../../../fluid/components/trunk/src/webapp/fluid-components/js/fluid/Fluid.js"></script>
+        <script type="text/javascript" src="../../../fluid/components/trunk/src/webapp/fluid-components/js/fluid/DragManager.js"></script>
+        <script type="text/javascript" src="../../../fluid/components/trunk/src/webapp/fluid-components/js/fluid/Reorderer.js"></script>
+        <script type="text/javascript" src="../../../fluid/components/trunk/src/webapp/fluid-components/js/fluid/LayoutCustomizer.js"></script>
+        <script type="text/javascript" src="../../../fluid/components/trunk/src/webapp/fluid-components/js/fluid/ModuleLayout.js"></script>
+
+        <script type="text/javascript">
+            // all elements (columns and sortable portlets) must have a unique ID as of Fluid 0.4
+            // Can this change to either manually or automatically assigning unique identifiers/classnames (avoiding taking over the ID)?
+            
+            // all columns/modules must be reachable by a selctor that can be safely scoped to the container            
+            // you can use any css selector pattern to find columns and modules, as long as jQuery selectors support it
+            jQuery(document).ready(function () {
+                /******************************************/
+                // Example 1, grab by class names and id
+                    fluid.reorderLayout ("#fluid-LayoutCustomizer-sample1", {
+                    columns: ".myColumn",
+                    modules: ".mySortable"
+                });
+                
+                /******************************************/
+                // Example 2, different selectors
+                fluid.reorderLayout ("#fluid-LayoutCustomizer-sample2", {
+                    columns: "> div",
+                    modules: "> div > div"
+                });
+              
+              
+                /******************************************/
+                // Example 3, the most robust layout system with permissions and priority sorting
+                // A. define layout
+                var layout = {
+                    id:"fluid-LayoutCustomizer-sample3",
+                    columns:[
+                        {id:"column_1", children:["sortable_1", "sortable_2", "sortable_3", "sortable_4"]},
+                        {id:"column_2", children:["sortable_5", "sortable_6", "sortable_7", "sortable_8"]},
+                        {id:"column_3", children:["sortable_9", "sortable_10", "sortable_11", "sortable_12"]}
+                    ]
+                };
+                // B. define permissions
+                // For those who are interested in this level of functionality, these numbers would be generated by a server side layout manager
+                // and they would be refreshed via the callback method
+                var perms = [
+                  [1,1,1,0,0,0,0,0,0,0,0,0],
+                  [0,0,0,0,0,0,0,0,0,0,0,0],
+                  [0,0,0,0,0,0,0,0,0,0,0,0],
+                  [0,0,0,0,0,0,0,0,0,0,0,0],
+                  [0,0,0,0,0,0,0,0,0,0,0,0],
+                  [0,0,0,0,0,0,0,0,0,0,0,0],
+                  [0,0,0,0,0,0,0,0,0,0,0,0],
+                  [0,0,0,0,0,0,0,0,0,0,0,0],
+                  [0,0,0,0,0,0,0,0,0,0,0,0],
+                  [0,0,0,0,0,0,0,0,0,0,0,0],
+                  [0,0,0,0,0,0,0,0,0,0,0,0],
+                  [0,0,0,0,0,0,0,0,0,0,0,0]
+                ];                
+                // C. CALLBACK
+                var orderChangedCallbackUrl;
+                
+                // D. user options
+                var options;
+                
+                fluid.initLayoutCustomizer(layout, perms, orderChangedCallbackUrl, options);
+              
+            });
+        </script>
+	</head>
+	<body>
+        <h1>Example 1: A simple set of sortable elements within columns</h1>
+        <p>Sortable elements are also sometimes called "portlets".</p>
+        <div id="fluid-LayoutCustomizer-sample1" class="columnSetup1">
+            <div id="col1" class="myColumn">
+                <h2>Column A</h2>
+                <div id="el1" class="mySortable">Drag me! Content goes here...</div>
+                <div id="el2" class="mySortable">Drag me! Content goes here...</div>
+                <div id="el3" class="mySortable">Drag me! Content goes here...</div>
+                <div id="el4" class="mySortable">Drag me! Content goes here...</div>
+            </div>
+            <div id="col2" class="myColumn">
+                <h2>Column B</h2>
+                <div id="el6" class="mySortable">Drag me! Content goes here...</div>
+                <div id="el7" class="mySortable">Drag me! Content goes here...</div>
+                <div id="el8" class="mySortable">Drag me! Content goes here...</div>
+                <div id="el9" class="mySortable">Drag me! Content goes here...</div>
+            </div>
+            <div id="col3" class="myColumn">
+                <h2>Column C</h2>
+                <div id="el11" class="mySortable">Drag me! Content goes here...</div>
+                <div id="el12" class="mySortable">Drag me! Content goes here...</div>
+                <div id="el13" class="mySortable">Drag me! Content goes here...</div>
+                <div id="el14" class="mySortable">Drag me! Content goes here...</div>
+            </div>
+        </div>
+
+        <h1>Example 2: Another example</h1>
+        <p>Unsortable elements mixed with sortable elements, and our high contrast accessbility theme</p>        
+        
+        <div id="fluid-LayoutCustomizer-sample2" class="columnSetup2 -fluid-theme-highContrast">
+            <div id="unique_1">
+                <h2>Column A</h2>
+                <div id="unique_2">Draggable Element</div>
+                <div id="unique_3">Draggable Element</div>
+                <p id="unique_4">Static Content</p>
+                <p id="unique_5">Static Content</p>
+            </div>
+            <div id="unique_6">
+                <h2>Column B</h2>
+                <div id="unique_7">Draggable Element</div>
+                <p id="unique_8">Static Content</p>
+                <p id="unique_9">Static Content</p>
+                <div id="unique_10">Draggable Element</div>
+            </div>
+            <div id="unique_11">
+                <h2>Column C</h2>
+                <div id="unique_12">Draggable Element</div>
+                <p id="unique_13">Static Content</p>
+                <div id="unique_14">Draggable Element</div>
+                <div id="unique_15">Draggable Element</div>
+            </div>
+        </div>
+
+        <h1>Example 3: Complex sorting</h1>
+        <p>The most robust sorting mechanism. Includes permission-based sorting with priorities.</p>
+        <p> Only the first item in Column A can be dragged, and it can only be dragged down within 2 units.</p>
+
+        <div id="fluid-LayoutCustomizer-sample3" class="columnSetup3">
+            <div id="column_1" class="myColumn">
+                <h2>Column A</h2>
+                <div id="sortable_1">Content Portal</div>
+                <div id="sortable_2">Content Portal</div>
+                <div id="sortable_3">Content Portal</div>
+                <div id="sortable_4">Content Portal</div>
+            </div>
+            <div id="column_2" class="myColumn">
+                <h2>Column B</h2>
+                <div id="sortable_5">Content Portal</div>
+                <div id="sortable_6">Content Portal</div>
+                <div id="sortable_7">Content Portal</div>
+                <div id="sortable_8">Content Portal</div>
+            </div>
+            <div id="column_3" class="myColumn">
+                <h2>Column C</h2>
+                <div id="sortable_9">Content Portal</div>
+                <div id="sortable_10">Content Portal</div>
+                <div id="sortable_11">Content Portal</div>
+                <div id="sortable_12">Content Portal</div>
+            </div>
+        </div>
+                
+	</body>
+</html>
+
